@import '../../variable.less';
.record-main{
  background-color: #eee;
  position: relative;
  width: 100%;
  height: 100vh;
  padding:32rpx 32rpx 0rpx;
  box-sizing: border-box;
  font-size: @s-fontsize;
  .part0{
    height: 100%;
    .tip{
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      .voice-icon{
        
      }
      .voice-text{
        font-weight: bolder;
      }
    }
    .record-content{
      font-size: @s-fontsize;
      overflow-y: auto;
      height: calc(100vh - 320rpx);
      .record-content-inner{
        padding:32rpx;
        border-radius: 16rpx;
        line-height: 60rpx;
        box-sizing: border-box;
        font-weight: bold;
        width: 100%;
        height: fit-content;
        background-color: white;
      }
      .cont{
        display: inline;
        line-height: inherit;
      }
      .dot{
        display: inline-block;
        margin-left: 10rpx;
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: black;
        animation: flashAnimation 0.5s ease-in-out infinite;
        vertical-align: middle;
      }
      .scroll-target{
        width: 0;
        height: 0;
      }
    }
    
    .console{
      width: 90%;
      box-sizing: border-box;
      border-radius: 48rpx;
      left: 50%;
      font-size: @s-fontsize;
      @cancel-btn-width : 200rpx;
      
      .time{
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bolder;
        .dot{
          width: 16rpx;
          height: 16rpx;
          border-radius: 16rpx;
          background-color: #e83a2f;
          margin-right: 10rpx;
        }
      }
      .time2{
        display: flex;
        align-items: center;
        justify-content: center;
        .time2-inner{
          background-color: #333;
          border-radius: 8rpx;
          text-align: center;
          padding:16rpx;
          color: white;
        }
      }
      .console-btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 32rpx;
        color: white;
        
        .cancel-btn{
          padding:20rpx 40rpx;
          background-color: cornflowerblue;
          text-align: center;
          height: inherit;
          border-radius: 60rpx;
          box-sizing: border-box;
          width: @cancel-btn-width;
          flex-shrink: 0;
        }
        
        .submit-btn{
          width: calc(100% - 32rpx - @cancel-btn-width);
          height: inherit;
          flex-shrink: 0;
          padding:20rpx 40rpx;
          border-radius: 60rpx;
          background-color: #e83a2f;
          text-align: center;
          box-sizing: border-box;
          position: relative;
          overflow: hidden;
          .bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background-color: #ff976a;
          }
          .txt{
            position: relative;
            z-index: 1000;
          }
          
        }
      }
      
    }
  }
  .part1{
    height: 100%;
    .re-content{
      font-size: @s-fontsize;
      font-weight: bold;
      line-height: 60rpx;
      max-height: calc(100vh - 480rpx);
      overflow-y: auto;
    }
    .ai-console{
      margin-top: 32rpx;
      border-radius: 16rpx;
      background-color: white;
      padding:32rpx;
      box-sizing: border-box;
      .ai-process-item{
        margin-bottom: 24rpx;
        font-size: @s-fontsize;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &:last-child{
          margin-bottom: 0rpx;
        }
        .icon{
          margin-right: 20rpx;
        }
      }
    }
  }
  .part2{
    position: relative;
    width: 100%;
    height: 100%;
    .ai-result{
      padding:32rpx;
      background: linear-gradient(to bottom, pink, 10%,white);
      border-radius: 16rpx;
      .ai-result-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #333;
        .res-tip{
          font-size: @m-fontsize;
          font-weight: bold;
          padding-bottom: 12rpx;
          
        }
      }
      
      .audio{
        margin-top: 32rpx;
      }
      .res-title{
        font-size:  @m-fontsize;
        font-weight: bold;
        margin-top: 32rpx;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis
      }
      .res-content{
        margin-top: 40rpx;
        font-size: @s-fontsize;
        max-height: calc(100vh - 580rpx);;
        overflow-y: auto;
      }
      .share-btn-wrap{
        margin-top: 20rpx;
        .share-btn{
          background: none;
          border: none;
          width: 48rpx;
          height: 48rpx;
          padding: 0;
          appearance: none;
          font-size: 0;
          box-shadow: none;
          margin: 0;
        }
      }
    }
    
    .ai-result-console{
      width: 100%;
      position: absolute;
      bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      padding:0rpx 32rpx;
      
      .btn{
        width: 240rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 80rpx;
        color: white;
        font-size: @s-fontsize;
        text-align: center;
        font-weight: bold;
      }
  

      .submit-btn{
        background-color: #333;
        
      }
      .ai-result-share-btn{
        background-color:#1989fa ;
      }
    }
  }
}